<template>
    <div class="app-card">
        <el-card class="el-card-style">
            <!-- 操作按钮区域 -->
            <div>
                <div>
                    <el-select v-model="tablePanelConfig.status" style="width: 100px;" :size="size">
                        <el-option value="1,2,9" label="全部"/>
                        <el-option value="1" label="待审核"/>
                        <el-option value="2" label="通过"/>
                        <el-option value="9" label="异常"/>
                    </el-select>
                    <el-button type="primary" :icon="Search" @click="init">
                        查询
                    </el-button>
                </div>
            </div>

            <table-panel
                style="margin-top: 10px;"
                :isSelect="false"
                :loading="tablePanelConfig.loading"
                :tableData="tablePanelConfig.tableData"
                :height="tablePanelConfig.height"
                :columns="tablePanelConfig.columns"
                :total="tablePanelConfig.total"
                :currentPage="tablePanelConfig.currentPage"
                :pageCount="tablePanelConfig.pageCount"
                :operationBtn="tablePanelConfig.operationBtn"
                @handleCurrentChange="handleCurrentChange"
            />
        </el-card>

        <!-- 审核弹窗 -->
        <examine-flower-dialog
            ref="examineFlowerDialog"
            @success="init"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Search
} from '@element-plus/icons-vue'
import TablePanel from '@/components/company/TablePanel.vue'
import http from '@/api/http'
import { formatYearMonthDate } from '@/uitils/formatTime'
import ExamineFlowerDialog from '@/components/company/ExamineFlowerDialog.vue'

// 变量
const tablePanelConfig = ref(
    {
        loading: false,
        tableData: [],
        height: 'calc(100vh - 240px)',
        status: "1",
        columns: [
            {
                label: '台号',
                prop: 'Number'
            },
            {
                label: '时间',
                prop: 'Time'
            },
            {
                label: '状态',
                prop: 'Status',
                formatter: (row) => {
                    switch (row.Status) {
                        case 1:
                            return '待审核'
                        case 2:
                            return '通过'
                        case 9:
                            return '异常'
                    }
                }
            }
        ],
        total: 0,
        currentPage: 1,
        pageCount: 1,
        operationBtn: [
            {
                dynamicName: (row) => {
                    if (row.Status === 1) {
                        return {
                            name: '审核'
                        }
                    }
                    return {
                            name: '查看',
                            color: '#67C23A'
                        }
                },
                click: (row) => {
                    if (row.Status === 1) {
                        examineBtn(row)
                    } else {
                        lookBtn(row)
                    }
                }
            }
        ]
    }
)
const examineFlowerDialog = ref(null)

// 函数
onMounted(() => {
    init()
})

function init() {
    tablePanelConfig.value.loading = true
    const params = {
        order: 'desc',
        page: tablePanelConfig.value.currentPage,
        rows: 100,
        sort: 'CreateDate',
        wheres: "[{\"name\":\"Status\",\"value\":" + tablePanelConfig.value.status + ",\"displayType\":\"in\"}]"
    }
    http.post('/api/ExamineList/getPageData', params).then(res => {
        tablePanelConfig.value.tableData = res.rows
        tablePanelConfig.value.total = res.total
        tablePanelConfig.value.loading = false
    }).catch(error => {
        console.log(error)
        tablePanelConfig.value.loading = false
    })
}

function handleCurrentChange(val) {
    tablePanelConfig.value.currentPage = val
    init()
}

function examineBtn(row) {
    examineFlowerDialog.value.open(
        {
            title: '审核信息',
            row
        }
    )
}

function lookBtn(row) {
    examineFlowerDialog.value.open(
        {
            tag: 'look',
            title: '审核信息',
            row
        }
    )
}
</script>

<style lang="less" scoped>
.app-card {
    width: 100%;
    height: calc(100vh - 95px);
    padding: 5px;
}

.el-card-style {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
